<template>
  <van-nav-bar
    title="分类"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    fixed
    placeholder
  />
  <van-row>
    <van-col span="6">
      <van-sidebar v-model="active" class="leftList">
        <van-sidebar-item :title="item" v-for="(item, index) in listArr" :key="index" />
      </van-sidebar>
    </van-col>
    <van-col>
      <van-sidebar v-model="active" class="rightList">
        <van-sidebar-item :title="item" v-for="(item, index) in listArr2" :key="index" />
      </van-sidebar>
    </van-col>
  </van-row>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
let active = ref(0)
let listArr = ref([])
let cateApi = 'http://localhost:3001/api/pro/categorylist'
//获取左边数据
async function getLeftData() {
  let r = await axios.get(cateApi)
  console.log(r.data.data)
  listArr.value = r.data.data
}
getLeftData()

//获取右边数据
let listArr2 = ref([])
let cateApi2 = 'http://localhost:3001/api/pro/categorybrandlist'
async function getRightData() {
  let r = await axios.get(cateApi2, {
    params: { category: listArr.value[active.value] },
  })
  console.log(r.data.data)
  listArr2.value = r.data.data
}
getRightData()
</script>

<style>
.leftList,
.rightList {
  height: calc(100vh - 96px);
}
</style>
